<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>添加地址</title>
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/add_the_address.css">
</head>

<body>
	<header class="header">
		<img onclick="history.back()" class="arrow" src="./img/my_favorite/img-1_10.png" alt="">
		<span class="title">添加地址</span>
	</header>
	<div class="add_the_address_from">
		<form class="address_form">
			<div class="item">
				<label class="name">收货人:</label>
				<input type="text" name="name" placeholder="请输入收货人姓名" pattern="/.+/" data-error="请输入至少一个字符姓名">
			</div>
			<div class="item">
				<label class="phone">手机号码:</label>
				<input type="text" name="tel" placeholder="请输入收货人手机号码"
					pattern="/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/"
					data-error="请输入正确的手机号">
			</div>

			<div class="select_address_box item">
				<label class="department">所在地区:</label>
				<select class="select_address province" name="province_id" id="province">
				</select>
				<select class="select_address city" name="city_id" id="city">
				</select>
				<select class="select_address" name="county_id" id="district">
				</select>
				<select class="select_address" name="town_id" id="street">
				</select>


			</div>
			<div class=".detailed_address_box item">
				<label class="detailed_address">详细地址</label>
				<textarea class="detailed_address_textarea" name="street" cols="30" rows="10" pattern="/.+/"
					data-error="请输入详细地址"></textarea>
			</div>
			<div class="item">
				<label class="phone">邮政编码:</label>
				<input type="text" name="code" placeholder="请输入邮政编码" pattern="/^[1-9]\d{5}$/" data-error="请输入正确的邮政编码">
			</div>

			<div class="item">
				<label class="phone">默认地址:</label>
				<input class="choice_box" name="isDefault" type="checkbox">
			</div>
		</form>
	</div>
	<button type="button" class="button_new_folder">添加</button>
	<script src="./js/axios.min.js"></script>
	<script src="./js/axios.config.js"></script>
	<script src="./js/utils.js"></script>
	<script>
		var oProvince = document.querySelector("#province")
		var oCity = document.querySelector("#city")
		var oDistrict = document.querySelector("#district")
		var oStreet = document.querySelector("#street")
		axios.get("/pcct/province").then(function (res) {
			if (res.status) {
				var html = ""
				res.data.forEach(function (item) {
					var option = `<option value="${item.province_id}">${item.name}</option>`
					html += option
				})
				oProvince.insertAdjacentHTML("beforeend", html)
			}
		})
		oProvince.addEventListener('change', function () {
			var pid = this.value
			axios.get('/pcct/city', {
				params: {
					id: pid
				}
			}).then(function (res) {
				if (res.status) {
					var html = ""
					res.data.forEach(function (item) {
						var option = `<option value="${item.city_id}">${item.name}</option>`
						html += option
					})
					oCity.innerHTML = html
				}
			})
		})
		oCity.addEventListener('change', function () {
			var pid = this.value
			axios.get('/pcct/county', {
				params: {
					id: pid
				}
			}).then(function (res) {
				if (res.status) {
					console.log(res)
					var html = ""
					res.data.forEach(function (item) {
						var option = `<option value="${item.county_id}">${item.name}</option>`
						html += option
					})
					oDistrict.innerHTML = html
				}
			})
		})
		oDistrict.addEventListener('change', function () {
			var pid = this.value
			axios.get('/pcct/town', {
				params: {
					id: pid
				}
			}).then(function (res) {
				if (res.status) {
					var html = ""
					res.data.forEach(function (item) {
						var option = `<option value="${item.town_id}">${item.name}</option>`
						html += option
					})
					oStreet.innerHTML = html
				}
			})
		})
		var oAddressForm = document.querySelector(".address_form")
		var oAddButton = document.querySelector(".button_new_folder")
		oAddButton.addEventListener('click', function () {
			// 表单验证
			var data = serialize(oAddressForm)
			data.isDefault = data.isDefault ? 1 : 0
			console.log(data)
			axios.post("/address/add", data).then(function (res) {
				if (res.status) {
             location.replace("./shipping_address.html")
				}else{
					alert(res.msg)
				}
			})

		})
	</script>
</body>

</html>